﻿#navMenu {
    float: left;
    width: 100%;
    line-height: 28px;
    background: #274fc9;
    font-family: Calibri;

    #ulMenu {
        position: relative;
        float: left; /* Clear floats */
        width: 100%;
        margin: 0;
        list-style: none;
        font-weight: bold;
        z-index: 5;

        li {
            position: relative;
            float: left;
            padding: 0 34px 0 35px;

            a {
                display: block;
                /*padding: 5px;*/
                color: #fff;
                text-decoration: none;

                &:hover {
                    color: #fff;
                    background: darken(#274fc9, 10%);
                }
            }

            &:hover ul {
                left: -50px; /* Bring back on-screen when needed */
            }

            &:hover a {
                background: darken(#274fc9, 10%);
            }

            &:hover ul li a:hover {
                background: darken(red, 10%);
            }
        }

        ul {
            background: #fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
            background: rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
            list-style: none;
            position: absolute;
            left: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
            padding-top: 1px;

            li {
                float: none;
                padding-top: 1px; /* Introducing a padding between the li and the a give the illusion spaced items */
                /*padding-left: 30px;*/
                a {
                    white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
                }
            }
        }
    }
}
